<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>postion:fixed使用与介绍</title>
<style>
    body{
        margin: 0px;
        padding: 0px;
    }
    div{
        color:#fff
    }
    .big_box{
        margin: 0px auto; 
        background-color: antiquewhite;  
        width: 960px; height: 3000px;
    }
    /* fixed（固定定位）
    fixed是相对浏览器窗口进行偏移
    即定位基点是浏览器窗口。
    固定定位会导致元素的位置不随页面的
    滚动而改变位置，好像固定在浏览器上面一样。
    搭配top、bottom、left、right
    这四个属性一起使用
    */

    /* 然后，我们给class为box的div设置固定定位
    距离顶部100像素，距离左边100像素 */
    .box{
        width: 200px;
        height:200px;
        position: fixed;
        background-color: red;
        top:100px;
        left: 100px;

    }
    .other{
        width: 200px;
        height:200px;
        background-color: blue;
    }
</style>
</head>
<body>
    <!-- 首先我们设置两个div -->
    <div class="big_box">
    <div class="box"></div>
    <div class="other"></div>
    </div>
</body>
</html>

